<script setup lang='ts'>
import { cloneDeep } from 'lodash-es'
import { computed, toRefs, watch } from 'vue'

import ConditionsItem from './conditions-item.vue'

const props = defineProps<{
    data: any
}>()

const emits = defineEmits(['clickCondit'])

const { data } = toRefs(props)

const conditions = ref<any>([])
const getData = computed(() => {
    return conditions.value.filter((v: any) => v.show)
})

function colClick(child: any, item: any) {
    console.log('colClick-----', child)
    //  隐藏选中子节点
    filterData(item, child)
}

function dropClick(child: any, item: any) {
    //  隐藏选中子节点
    filterData(item, child)
}

function filterData(item: any, child: any) {
    conditions.value.forEach((v: any) => {
        if (v.id === item.id) {
            v.show = false

            emits('clickCondit', v, child)
        }
    })
}

function showItem(item: any) {
    conditions.value.forEach((v: any) => {
        if (v.id === item.id) {
            v.show = true
        }
    })
}

function init() {
    data.value.forEach((v: any) => {
        v.show = true
    })

    conditions.value = cloneDeep(data.value)
}

watch(data, (val: any) => {
    if (val && val.length) {
        init()
    }
}, {
    deep: true,
    immediate: true,
})

defineExpose({
    showItem,
})
</script>

<template>
    <div class="conditions-box">
        <el-row v-for="(item, index) in getData"
                :key="index"
                class="pr-10 mb-20 items-start"
        >
            <el-col :span="3"
                    class="text-16 c-#1D2129 font-600 lh-40"
            >
                {{ item.label }} :
            </el-col>

            <el-col :span="21">
                <ConditionsItem :type="item.valueType"
                                :data="item.children"
                                @col-click="colClick($event, item)"
                                @drop-click="dropClick($event, item)"
                />
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>
.conditions-box {
    max-height: 467px;
    overflow: auto;
    margin-bottom: 20px;
}

/* 自定义整个滚动条 */
.conditions-box::-webkit-scrollbar {
    width: 4px;
}

/* 自定义滚动条轨道 */
.conditions-box::-webkit-scrollbar-track {
    // background: #f1f1f1;
}

/* 自定义滚动条的滑块（thumb） */
.conditions-box::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
.conditions-box::-webkit-scrollbar-thumb:hover {
    // background: #555;
}
</style>
